<template>
  <div class="app-container">

    <el-form :inline="true" :model="query,inspectionRecordLists" class="demo-form-inline">
      <el-form-item label="汽车牌照">
        <el-input v-model="query.carNo" placeholder="请输入车牌号码"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getinspectionRecordLists()" icon="el-icon-search">查询</el-button>
        <el-button type="warning" @click="refresh()" icon="el-icon-refresh">重置</el-button>
        <router-link :to="'/daily_work/addInspection'">
          <el-button type="success" icon="el-icon-plus">年检信息登记</el-button>
        </router-link>


        <el-button type="info" icon="el-icon-edit-outline" @click="updateInspection(inspectionRecordLists.ids)"> 年检信息编辑</el-button>


        <el-button type="danger" icon="el-icon-delete" @click="deleteInspectionId(inspectionRecordLists.ids)">删除年检信息</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="inspectionRecordLists"

      style="width: 100%"
      :row-class-name="tableRowClassName"
      @selection-change="inspectionRecordListsid"
    >

      <el-table-column
        prop="id"
        type="selection"
        width="30">
      </el-table-column>

      <el-table-column
        label="编号"
        width="50"
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="carNo"
        label="车牌号"
        width="120"
        show-overflow-tooltip
        align="center">

      </el-table-column>
      <el-table-column
        prop="insNo"
        label="年检标号"
        width="120"
        show-overflow-tooltip
        align="center">
      </el-table-column>
      <el-table-column
        prop="insDate"
        label="年检时间"
        width="116"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="insAmount"
        label="年检金额"
        width="116"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="年检单位"
        width="120"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="expireDate"
        label="下次年检时间"
        width="180"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作人员"
        width="120"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        width="120"
        align="center"
        show-overflow-tooltip>
      </el-table-column>

    </el-table>

    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      :current-page="current"
      :page-size="limit"
      style="padding: 30px 0; text-align: center"
      @current-change="getinspectionRecordLists"
    >
    </el-pagination>


  </div>
</template>

<script>
import InspectionApi from "@/api/Inspection";
export default {
  name: "Inspection",
  data() {
    return {

      current: 1, //-- 当前页
      limit: 10, //-- 每页多少条
      inspectionRecordLists: null, //-- 用户列表
      total: 0, //-- 总记录数
      inspection: {},
      query: {},
      multipleSelection: [],
      ids: ''
    }
  },


  methods: {

    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    getinspectionRecordLists(current=1){
      this.current=current
      InspectionApi.getinspectionRecordLists(this.current, this.limit,this.query).then((response)=>{
        console.log("获取用户列表成功！");
        this.inspectionRecordLists = response.data.items;
        this.total = response.data.total;
        console.log(this.inspectionRecordLists);
        console.log(this.total);
      })
    },
    //   重置查询内容
    refresh() {
      this.query= {},
        this.inspectionRecordLists()

    },
    //删除年检记录根据id
    deleteInspectionId(id){
      if(id!=null) {
        // alert(id)
        this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          InspectionApi.removeInspectionId(id).then((response) => {
            this.getinspectionRecordLists()
            this.$message({
              type: "success",
              message: "删除成功!",
            });

          })
        })
      }else {
        this.$confirm("请选中记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }
    },
    //年检修改
    updateInspection(id){
      if(id!=null) {
        this.$router.push({path: "/daily_work/updateInspection/" + id})
      }else {
        this.$confirm("请选中记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }
    },

    inspectionRecordListsid(id){
      this.ids=[]
      for (let i = 0; i < id.length; i++) {
        this.ids.push(id[i].id)
      }
      this.inspectionRecordLists.ids = this.ids
      console.log(this.ids)
    }
  },




  created() {
    this.getinspectionRecordLists()
  },



}
</script>

<style >

</style>
